// 首页的样式文件
// @import  导入的意思，可以把一个样式文件导入到另一个样式，此处为导入common.less文件
// 注意：文件后缀可以不加，双引号必须加
@import "common";
@baseFont: 50;
body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
}   
// 顶部搜索框
.search-content {
    display: flex;
    // 固定定位
    position: fixed;
    top: 0;
    left: 50%;
    // 回调百分之50
    transform: translateX(-50%);
    width: 15rem;
    // 求高度公式
    height: 88rem / 50;
    background-color: #ffc001;
    .classify {
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
        background: url(../images/classify.png) no-repeat;
        background-size: 44rem / @baseFont 70rem / @baseFont;
        margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
    }
    .sear {
        flex: 1;
        input {
            border: 0;
            outline: none;
            font-size: 25rem / @baseFont;
            color: #757575;
            width: 100%;
            height: 66rem / @baseFont;
            border-radius: 33rem / @baseFont;
            background-color: #fff2cc;
            margin: 12rem / @baseFont;
            padding-left: 55rem / @baseFont;
        }
    }
    .login {
        width: 75rem / @baseFont;
        height: 70rem / @baseFont;
        margin: 10rem / @baseFont;
        font-size: 25rem / @baseFont;
        text-align: center;
        line-height: 70rem / @baseFont;
        color: #f2f2f2;
    }
}
// banner部分
.banner {
    width: 750rem / @baseFont;
    height: 368rem / @baseFont;
    
    img {
        width: 100%;
        height: 100%;
    }
}
// 广告部分
.ad {
    width: 750rem / @baseFont;
    display: flex;
   a {
       flex: 1;
       img {
           width: 100%;
       }
   } 
}
// nav模块
nav {
    width: 750rem / @baseFont;
    a {
        float: left;
        width: 750rem / 5 /@baseFont;
        height: 140rem / @baseFont;
        text-align: center;
        img {
            display: block;
            width: 82rem / @baseFont;
            height: 82rem / @baseFont; 
            margin: 10rem / @baseFont auto 0;
        }
        span {
            font-size: 25rem /@baseFont;
            color: #333333;
        }
    }
}
